<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" class="header-left" size="30" @click="goBack" />
      填写服务订单
    </div>
    <status-bar item="0" />

    <van-cell class="cell">
      <template #title>
        <van-image
          width="25"
          height="25"
          :src="createInfo.service.serviceImg"
        />
        <span class="server-name"> {{ createInfo.service.serviceName }} </span>
      </template>
      <template #default>
        <div class="service-text">
          服务内容
        </div>
      </template>
    </van-cell>

    <van-cell-group class="cell">
      <van-cell>
        <template #title> 就诊医院 </template>
        <template #default>
          <div @click="showHospital = true">
            {{ form.hospital_name || "请选择就诊医院" }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title> 就诊时间 </template>
        <template #default>
          <div @click="showStartTime = true">
            {{ currentDate || "请选择就诊时间" }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title> 陪诊师 </template>
        <template #default>
          <div @click="showComponion = true">
            {{ showComponionName || "请选择陪诊师" }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title> 接送地址 </template>
        <template #default>
          <van-field
            v-model="form.receiveAddress"
            class="text"
            input-align="right"
            placeholder="请填写接送地址"
          />
        </template>
      </van-cell>

      <van-cell>
        <template #title> 联系电话 </template>
        <template #default>
          <van-field
            v-model="form.tel"
            class="text"
            input-align="right"
            placeholder="请填写联系电话"
          />
        </template>
      </van-cell>

    </van-cell-group>

    <van-cell-group title="服务需求" class="cell">

      <van-field
        v-model="form.demand"
        class="text"
        style="height: 100px;"
        placeholder="请简单描述你要就诊的科室"
      />

    </van-cell-group>

    <van-button type="primary" class="sumbit" size="large" @click="submit">提交订单</van-button>

    <!-- 底部弹出 -->
    <van-popup
      v-model:show="showHospital"
      position="bottom"
    >
      <van-picker
        :columns="showHospitalColumns"
        @confirm="showHospitalonConfirm"
        @cancel="showHospital = false"
      />
    </van-popup>

    <!-- 底部弹出 就诊时间-->
    <van-popup
      v-model:show="showStartTime"
      position="bottom"
    >
      <van-date-picker
        title="选择日期"
        :min-date="minData"
        @confirm="showStartTimeConfirm"
        @cancel="showStartTime = false"
      />
    </van-popup>

    <!-- 底部弹出 陪诊师-->
    <van-popup
      v-model:show="showComponion"
      position="bottom"
    >
      <van-picker
        :columns="showComponionColumns"
        @confirm="showComponionConfirm"
        @cancel="showComponion = false"
      />
    </van-popup>

    <!-- 支付二维码 -->
    <van-dialog v-model:show="showCode" :show-confirm-button="false">
      <van-icon name="cross" class="close" @click="closeCode" />
      <div> 微信支付 </div>
      <van-image
        width="150"
        height="150"
        :src="codeImg"
      />
      <div> 请使用本人微信扫描二维码支付 </div>
    </van-dialog>

  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import StatusBar from '../../components/statusBar.vue'
import { ref, reactive, getCurrentInstance, onMounted, computed } from 'vue'
import Qrcode from 'qrcode'

// 获取当前vue实例
const { proxy } = getCurrentInstance()

onMounted(async() => {
  const { data } = await proxy.$api.h5Companion()
  if (data.code === 10000) {
    console.log(data)
    Object.assign(createInfo, data.data)
  }
})

const createInfo = reactive({
  companion: [],
  hospitals: [],
  service: {}
})

const roter = useRouter()

const goBack = () => {
  roter.go(-1)
}

// formData
const form = reactive({
  hospital_id: '',
  hospital_name: '',
  demand: '',
  companion_id: '',
  receiveAddress: '',
  tel: '',
  starttime: ''
})

// 就诊医院
const showHospital = ref(false)

const showHospitalColumns = computed(() => {
  return createInfo.hospitals.map(item => {
    return { text: item.name, value: item.id }
  })
})
const showHospitalonConfirm = (item) => {
  console.log(item)
  form.hospital_id = item.selectedOptions[0].value
  form.hospital_name = item.selectedOptions[0].text
  // 关闭弹出层
  showHospital.value = false
}

// 就诊时间
const showStartTime = ref(false)
const currentDate = ref()
// 最小日期
const minData = ref(new Date())

const showStartTimeConfirm = (item) => {
  console.log(item)
  const dataStr = item.selectedValues.join('-')
  form.starttime = new Date(dataStr).getTime()
  currentDate.value = dataStr
  // 关闭弹出层
  showStartTime.value = false
}

// 陪诊师
const showComponion = ref(false)

const showComponionColumns = computed(() => {
  return createInfo.companion.map(item => {
    return { text: item.name, value: item.id }
  })
})
const showComponionName = ref()
const showComponionConfirm = (item) => {
  console.log(item)
  form.companion_id = item.selectedOptions[0].value
  showComponionName.value = item.selectedOptions[0].text
  // 关闭弹出层
  showComponion.value = false
}
// 支付弹窗
const showCode = ref(false)
const codeImg = ref('')
const closeCode = () => {
  showCode.value = false
  roter.push('/order')
}

// 提交表单
const submit = async() => {
  const params = [
    'hospital_id',
    'hospital_name',
    'demand',
    'companion_id',
    'receiveAddress',
    'tel',
    'starttime'
  ]

  for (const i of params) {
    if (!form[i]) {
      showNotify({ message: '请把每一项填写' })
      return
    }
  }

  const { data: orderRes } = await proxy.$api.createOrder(form)
  if (orderRes.code === 10000) {
    console.log(orderRes)
    Qrcode.toDataURL(orderRes.data.wx_code).then((url) => {
      showCode.value = true
      codeImg.value = url
    })
  }
}

</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
